<template>
  <div class="container">
    <!-- 表单筛选区域 -->
    <el-form inline>
      <el-form-item label="分类名称">
        <el-input
          v-model="name"
          size="small"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="findList"
        >搜索</el-button>
        <el-button size="small" @click="chongzhi">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作区域 -->
    <el-row type="flex" justify="space-between" align="middle">
      <!-- 左侧 -->
      <div class="left">
        <el-button
          type="primary"
          plain
          size="small"
          icon="el-icon-plus"
          @click="addfn"
        >新增</el-button>
        <el-button type="warning" size="small" plain icon="el-icon-download" @click="clickExport">导出</el-button>
      </div>
      <!-- 右侧 -->
      <div class="right">右侧区域</div>
    </el-row>
    <br>
    <!-- 表格区域 -->
    <el-table border :data="list">
      <el-table-column type="index" label="#" :index="indexTotal" />
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="tagname" label="标签名称" />
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" icon="el-icon-edit" circle @click="updateList(row.id)" />
          <el-button type="danger" icon="el-icon-delete" circle @click="delfn(row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- 分页区域 -->
    <el-pagination
      :current-page="page"
      :page-sizes="[2, 5, 7 , 10]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background=""
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <AddClass ref="foem" :show-assign-dialog.sync="showAssignDialog" />
  </div>
</template>
<script>
import AddClass from './component/add-tally.vue'
import { GetPageInfoAPI, delAPI, UpdateAPI } from '@/api/tally'
export default {
  components: {
    AddClass
  },
  data() {
    return {
      list: [],
      tagname: '',
      page: 1,
      limit: 10,
      total: 0,
      showAssignDialog: false,
      name: ''
    }
  },
  created() {
    // this.UserList()
    this.PageLiat()
  },
  methods: {
    findList() {
      const res = this.list.filter(item => item.tagname === this.name)
      console.log(res)
      this.list = res
    },
    chongzhi() {
      this.name = ''
    },
    indexTotal(index) {
      return (this.page - 1) * this.limit + index + 1
    },
    // async UserList() {
    //   const res = await GetUserInfoAPI()
    //   console.log(res)
    //   this.list = res.data
    // },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.limit = val
      this.PageLiat()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.PageLiat()
    },
    async PageLiat() {
      const res = await GetPageInfoAPI({
        tagname: this.tagname,
        page: this.page,
        limit: this.limit
      })
      console.log(res)
      this.list = res.data.data
      this.total = res.data.count
    },
    addfn() {
      this.showAssignDialog = true
    },
    delfn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delAPI(id)
        console.log(res)
        this.$message.success('删除成功')
        if (this.page > 1 && this.list.length === 1) {
          this.page--
        }
        this.PageLiat()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async updateList(id) {
      this.showAssignDialog = true
      const res = await UpdateAPI(id)
      console.log(res)
      this.$refs.foem.form = res.data
    },
    async clickExport() {
      // 请注意: 如果导出的是当前页, 那么数据, this.list 即可,
      // 但是我们一般导出的是全部的数据, 需要请求到所有的数据
      const { data: { data }} = await GetPageInfoAPI({ page: 1, limit: this.total })
      const headersArr = ['ID', '标签名称']
      const headersRelations = {
        'ID': 'id',
        '标签名称': 'tagname'
      }
      const dataArr = this.formatJson(data, headersArr, headersRelations)

      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: headersArr, // 表格的头部
          // 二维数组 [ [], [], [] ]
          data: dataArr,
          filename: '标签管理表', // 导出的excel文件名
          autoWidth: true, // 是否开启单元格宽度自适应
          bookType: 'xlsx' // 类型
        })
      })
    },

    // 将表头数据和数据进行对应
    formatJson(rows, headersArr, headersRelations) {
      const resultsArr = rows.map(item => {
        const arr = []
        headersArr.forEach(key => {
          const englishKey = headersRelations[key]
          arr.push(item[englishKey])
        })
        return arr
      })
      return resultsArr
    }
  }
}
</script>
<style scoped>
.container {
  padding: 50px 20px 0 20px;
}
</style>
